<template>
    <div class="Platform">
        <div class="title">权限管理-平台用户管理</div>
        <div class="contentBox">
            <div class="lcontent">
                <div class="licon">
                    <div class="icon_jia" @click="doPopup"></div>
                    <div class="icon_shan" @click="dodelete"></div>
                </div>
                <div class="ltable">
                    <el-table
                            :header-cell-style="{background:'rgba(247,249,252,.5)',color:'#1F2E4D',}"
                            @selection-change="handleSelectionChange"
                            :data="tableData"
                            class="tab"
                            style="width: 100%"
                            ref="multipleTable">
                        <el-table-column
                                fixed
                                prop="id"
                                type="selection"
                                align="center">
                        </el-table-column>
                        <el-table-column
                                align="center"
                                prop="id"
                                label="序号">
                            <template slot-scope="scope">{{scope.$index+1}}</template>
                        </el-table-column>
                        <el-table-column
                                align="center"
                                prop="name"
                                label="账号">
                            <template slot-scope="scope">{{ scope.row.name }}</template>
                        </el-table-column>
                        <el-table-column
                                align="center"
                                prop="nickName"
                                label="昵称">
                        </el-table-column>
                        <el-table-column
                                v-if="false"
                                align="center"
                                prop="password"
                                label="密码">
                        </el-table-column>
                        <el-table-column
                                align="center"
                                prop="roleName"
                                label="角色名称">
                        </el-table-column>
                        <el-table-column
                                align="center"
                                prop="createTime"
                                label="添加时间">
                        </el-table-column>
                        <el-table-column
                                label="操作"
                                align="center">
                            <template slot-scope="scope">
                                <el-button @click="handleClick(scope.row)" class="lbtn" size="small">修改</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <!--弹窗-->
                <div class="Popup" v-if="isPopup==true">
                    <div class="Popup_Box">
                        <div class="PopupTop">
                            <span>{{msg}}</span>
                            <span class="el-icon-close" @click="doClose"></span>
                        </div>
                        <div class="PopupCont">
                            <div>
                                <span>账&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp号</span>
                                <el-input v-model="name" class="linp" size="mini" placeholder="请输入账号"></el-input>
                            </div>
                            <div>
                                <span>昵&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp称</span>
                                <el-input v-model="nickName" class="linp" size="mini" placeholder="请输入昵称"></el-input>
                            </div>
                            <div>
                                <span>登陆密码</span>
                                <el-input v-model="loginPsd" class="linp" size="mini" show-password
                                          placeholder="请输入密码"></el-input>
                            </div>
                            <div class="newPassword">
                                <span>操作密码</span>
                                <el-input v-model="inputPsd" class="linp" size="mini" show-password
                                          placeholder="请输入密码"></el-input>
                            </div>

                            <div>
                                <span>上班时间</span>
                                <el-input v-model="workTime" class="linp" size="mini"></el-input>
                            </div>
                            <div>
                                <span>选择角色</span>
                                <el-select v-model="key" size="mini" class="lselect" placeholder="请选择">
                                    <el-option
                                            v-for="item in options"
                                            :key="item.key"
                                            :label="item.value"
                                            :value="item.key">
                                    </el-option>
                                </el-select>
                            </div>
                            <button class="btn btn1" @click="doClose">取消</button>
                            <button class="btn btn2" @click="doupdate">确定</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Platform",
        data() {
            return {
                tableData: [{
                    id: '',
                    name: '',
                    nickName: '',
                    password: '',
                    roleName: '',
                    createTime: ''
                }],
                isPopup: false,
                input: '',
                workTime: '9:00 - 18:00',
                options: [{
                    key: '',
                    value: ''
                }],
                value: '',
                isinp: true,
                row: [],//最后选中的一行数据
                // ids:[],
                //弹框中的内容
                id: "",
                name: "",
                nickName: "",
                loginPsd: "",
                inputPsd: "",
                key: "",
                msg: ""
            }
        },

        methods: {
            handleSelectionChange() {
            },
            handleClick(row) {
                // console.log(row)
                this.msg = "编辑用户";
                this.isPopup = true
                this.isinp = false
                this.lAxios({
                    method: "post", //方法
                    url: "/power/getplatUser.do", //路径，基础路径在main.js里面配置
                    params: {
                        //传参
                        id: row.id,
                    }
                }).then(res => {
                    //成功
                    if (res.data.status == 0) {
                        var retu = res.data.data
                        this.options = retu.list
                        this.id = retu.id
                        this.name = retu.name;
                        this.nickName = retu.nickName;
                        // this.loginPsd=retu.password,
                        this.inputPsd = retu.inputPsd
                        this.workTime = retu.workTime
                        this.key = parseInt(retu.roleId);
                        // console.log(res.data.data)
                        this.isPopup = true
                        // this.selectUser();
                    } else {

                    }
                    //异常
                }).catch(err => {
                    console.log(err);
                });
            },
            doPopup() {
                this.msg = "新建用户";
                this.name = "";
                this.nickName = "";
                this.name = "";
                this.key = '';
                this.nickName = "";
                this.inputPsd = ""
                this.loginPsd = ""
                this.isinp = true;
                this.isPopup = true
                // console.log('弹窗')
                this.lAxios({
                    method: "post", //方法
                    url: "/power/getRoles.do", //路径，基础路径在main.js里面配置
                    params: {}
                }).then(res => {
                    //成功
                    if (res.data.status == 0) {
                        this.options = res.data.data
                    }
                }).catch(err => {
                    //失败的回调函数
                    console.log(err);
                });
            },
            doClose() {
                this.isPopup = false
            },
            doupdate() {
                this.lAxios({
                    method: "post", //方法
                    url: "/power/insertOrUpdateUser.do", //路径，基础路径在main.js里面配置
                    params: {
                        //传参
                        id: this.id,
                        name: this.name,
                        nickName: this.nickName,
                        password: this.loginPsd,
                        inputPsd: this.inputPsd,
                        roleId: this.key,
                        workTime: this.workTime
                    }
                }).then(res => {
                    //成功
                    if (res.data.status == 0) {
                        this.isPopup = false
                        this.selectUser();
                    } else {
                        this.$message.error(res.data.msg)
                    }
                })
            },
            dodelete() {
                var ids = "";
                this.$refs.multipleTable.selection.forEach(function (i) {
                    console.log(i.id)
                    ids = i.id;
                })
                if (ids) {
                    this.$confirm('要删除该用户吗？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.lAxios({
                            method: "post", //方法
                            url: "/power/deleterUser.do",
                            params: {ids: ids}
                        }).then(res => {
                            //成功
                            if (res.data.status == 0) {
                                // this.$router.push('/Platform')
                                this.$message("删除成功！");
                                this.selectUser();
                            } else {
                                this.$message("删除失败！");
                            }
                        })
                    }).catch(() => {
                    });
                } else {
                    this.$message("请选择要删除的用户！");
                }
            },
            selectUser() {
                this.lAxios({
                    method: "post", //方法
                    url: "/power/platFormList.do", //路径，基础路径在main.js里面配置
                    params: {
                        //传参
                    }
                }).then(res => {
                    // console.log(res.data.data)
                    //成功
                    if (res.data.status == 0) {
                        this.tableData = res.data.data;
                    } else {

                    }

                })
            }
        }
        ,
        created() {
            this.id = "";
            this.selectUser();
        }
    }
</script>

<style lang="scss" scoped>
    .Platform {
        box-sizing: border-box;
        width: 100%;
        /*margin-left: 10px;*/
        /*height: 100vh;*/
        background-color: #F7F9FC;
        font-size: 12px;
        padding-left: 20px;
    }

    .title {
        height: 43px;
        line-height: 43px;
    }

    .top {
        height: 25px;
        border-bottom: 1px solid #797979;
    }

    .lcontent {
        width: 96%;
        margin-left: 2%;
        /*height: 171px;*/
        padding-top: 20px;
    }

    .licon {
        margin-top: 10px;
        margin-bottom: 20px;
        display: flex;
        flex-direction: row;
    }

    .licon > div {
        margin-right: 10px;
        /*border: 1px solid #f7f7f7;*/
    }


    .ltable {
        width: 100%;
        border: 1px solid #f7f7f7;
        padding-bottom: 30px;
    }

    /*-------------弹窗------------------*/
    .Popup {
        width: 100%;
        height: 100%;
        z-index: 99;
        position: fixed;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, .5);
    }

    .Popup_Box {
        width: 400px;
        height: 455px;
        background-color: white;
        box-shadow: 5px 5px 6px 2px #717171;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .PopupTop {
        height: 40px;
        line-height: 40px;
        font-size: 16px;
        font-weight: bold;
        background-color: #f5f5f5;
        position: relative;
    }

    .PopupTop > span:nth-child(1) {
        margin-left: 20px;
    }

    .PopupTop > span:nth-child(2) {
        font-size: 18px;
        color: #797979;
        position: absolute;
        top: 12px;
        right: 20px;
    }

    .PopupCont {
        font-size: 12px;
        margin-top: 30px;
        margin-left: 50px;
    }

    .PopupCont > div {
        margin-top: 20px;

    }

    .marginL {
        margin-left: 34px;
    }

    .PopupCont > div:nth-child(4) {
        margin-left: -24px;
    }

    .PopupCont > div > span {
        margin-right: 10px;
    }

    .linp {
        width: 177px;
    }

    .lselect {
        width: 110px;
    }

    .active {
        background-color: #199ed8;
        color: white;
    }

    .btn {
        width: 140px;
        height: 44px;
        background-color: #f7f9fc;
        color: #999;
        font-size: 12px;
        border: 1px solid #999;
        border-radius: 4px;
        margin-top: 30px;
    }

    .btn1 {
        margin-right: 10px;
    }

    .btn2 {
        background-color: #199ed8;
        color: white;
    }

    .newPassword {
        padding-left: 24px;
    }

    .contentBox {
        background-color: white;
    }

    .icon_jia {
        width: 32px;
        height: 32px;
        margin-right: 10px;
        background: url("../../assets/imgs/communication/jia.png") no-repeat;
    }

    .icon_shan {
        width: 32px;
        height: 32px;
        margin-left: 10px;
        background: url("../../assets/imgs/communication/shan.png") no-repeat;
    }

    .tab {

    }

    .tab .el-table__header .el-table th, .el-table tr {
        background-color: #199ed8 !important;
    }

    .lbtn {
        width: 80px;
        margin-left: 10px;
        border: 1px solid #3377ff;
        color: #3377ff;
    }
</style>
